<template>
  <div class="card content-box">
    <el-form style="width: 260" label-width="80px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="请求管理" name="request">
          <el-radio v-model="requestSelect" label="allSelect" @click="selectAllRequest()">全选</el-radio>
          <el-radio v-model="requestSelect" label="invertSelect" @click="invertSelectRequest()">反选</el-radio>
          <el-button type="primary" @click="onSubmitRequest"> 保存 </el-button>
          <div v-for="(item, index) in requestList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="问题管理" name="problem">
          <el-radio v-model="problemSelect" label="allSelect" @click="selectAllproblem()">全选</el-radio>
          <el-radio v-model="problemSelect" label="invertSelect" @click="invertSelectproblem()">反选</el-radio>
          <el-button type="primary" @click="onSubmitproblem"> 保存 </el-button>
          <div v-for="(item, index) in problemList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="变更管理" name="change">
          <el-radio v-model="changeSelect" label="allSelect" @click="selectAllchange()">全选</el-radio>
          <el-radio v-model="changeSelect" label="invertSelect" @click="invertSelectchange()">反选</el-radio>
          <el-button type="primary" @click="onSubmitchange"> 保存 </el-button>
          <div v-for="(item, index) in changeList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资产管理" name="cim">
          <el-radio v-model="cimSelect" label="allSelect" @click="selectAllcim()">全选</el-radio>
          <el-radio v-model="cimSelect" label="invertSelect" @click="invertSelectcim()">反选</el-radio>
          <el-button type="primary" @click="onSubmitcim"> 保存 </el-button>
          <div v-for="(item, index) in cimList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发布管理" name="release">
          <el-radio v-model="releaseSelect" label="allSelect" @click="selectAllrelease()">全选</el-radio>
          <el-radio v-model="releaseSelect" label="invertSelect" @click="invertSelectrelease()">反选</el-radio>
          <el-button type="primary" @click="onSubmitrelease"> 保存 </el-button>
          <div v-for="(item, index) in releaseList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="任务管理" name="task">
          <el-radio v-model="taskSelect" label="allSelect" @click="selectAlltask()">全选</el-radio>
          <el-radio v-model="taskSelect" label="invertSelect" @click="invertSelecttask()">反选</el-radio>
          <el-button type="primary" @click="onSubmittask"> 保存 </el-button>
          <div v-for="(item, index) in taskList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其它" name="other">
          <el-radio v-model="otherSelect" label="allSelect" @click="selectAllother()">全选</el-radio>
          <el-radio v-model="otherSelect" label="invertSelect" @click="invertSelectother()">反选</el-radio>
          <el-button type="primary" @click="onSubmitother"> 保存 </el-button>
          <div v-for="(item, index) in otherList" :key="index">
            <el-checkbox v-model="item.useStatus" size="large" /> {{ item.noticeRuleName }}
            <p style="color: #585151">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知方式：邮件通知 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知对象：{{
                item.noticeRuleTypeLable
              }}
            </p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="basicForm">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { findPagerNoticeRule, noticeRuleUpdate } from "@/api/modules/systemTools";
const activeName = ref("request");
//request开始
const requestList = ref<any>([]);
const requestSelect = ref("");
const onSubmitRequest = () => {
  noticeRuleUpdate(requestList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllRequest = () => {
  let tem = requestList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  requestList.value = tem;
};
const invertSelectRequest = () => {
  let tem = requestList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  requestList.value = tem;
};
//request结束
//problem开始
const problemList = ref<any>([]);
const problemSelect = ref("");
const onSubmitproblem = () => {
  noticeRuleUpdate(problemList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllproblem = () => {
  let tem = problemList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  problemList.value = tem;
};
const invertSelectproblem = () => {
  let tem = problemList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  problemList.value = tem;
};
//problem结束
//change开始
const changeList = ref<any>([]);
const changeSelect = ref("");
const onSubmitchange = () => {
  noticeRuleUpdate(changeList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllchange = () => {
  let tem = changeList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  changeList.value = tem;
};
const invertSelectchange = () => {
  let tem = changeList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  changeList.value = tem;
};
//change结束
//cim开始
const cimList = ref<any>([]);
const cimSelect = ref("");
const onSubmitcim = () => {
  noticeRuleUpdate(cimList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllcim = () => {
  let tem = cimList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  cimList.value = tem;
};
const invertSelectcim = () => {
  let tem = cimList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  cimList.value = tem;
};
//cim结束
//release开始
const releaseList = ref<any>([]);
const releaseSelect = ref("");
const onSubmitrelease = () => {
  noticeRuleUpdate(releaseList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllrelease = () => {
  let tem = releaseList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  releaseList.value = tem;
};
const invertSelectrelease = () => {
  let tem = releaseList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  releaseList.value = tem;
};
//release结束
//task开始
const taskList = ref<any>([]);
const taskSelect = ref("");
const onSubmittask = () => {
  noticeRuleUpdate(taskList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAlltask = () => {
  let tem = taskList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  taskList.value = tem;
};
const invertSelecttask = () => {
  let tem = taskList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  taskList.value = tem;
};
//task结束
//other开始
const otherList = ref<any>([]);
const otherSelect = ref("");
const onSubmitother = () => {
  noticeRuleUpdate(otherList.value).then(res => {
    ElMessage({
      type: "success",
      message: "保存成功"
    });
  });
};
const selectAllother = () => {
  let tem = otherList.value;
  tem.forEach(function (element) {
    element["useStatus"] = true;
  });
  otherList.value = tem;
};
const invertSelectother = () => {
  let tem = otherList.value;
  tem.forEach(function (element) {
    element["useStatus"] = element["useStatus"] == true ? false : true;
  });
  otherList.value = tem;
};
//other结束
onMounted(() => {
  findPagerNoticeRule().then(res => {
    (res.data as any).forEach(function (tmpselect) {
      tmpselect["noticeRuleTypeLable"] = tmpselect["noticeRuleType"] == "" ? "未设置" : "请求人或报告人";
      if (tmpselect["module"] == "request") {
        requestList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "problem") {
        problemList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "change") {
        changeList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "cim") {
        cimList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "release") {
        releaseList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "task") {
        taskList.value.push(tmpselect);
      }
      if (tmpselect["module"] == "other") {
        otherList.value.push(tmpselect);
      }
    });
  });
});
</script>

<style scoped lang="scss">
@import "./index.scss";
.item {
  width: 500px;
}
</style>
